<template>
  <Row type="flex" :gutter="18">
    <Col :span=19>
      <Panel shadow>
        <div slot="title">作业列表</div>
          <div slot="extra">
            <ul class="filter">
              <li>
                <Input 
                  placeholder="keyword"
                  icon="ios-search-strong"/>
              </li>
              <li>
                <Button type="info" @click="onRefresh">
                  <Icon type="refresh"></Icon>
                  刷新
                </Button>
              </li>
            </ul>
          </div>
          <Table stripe :columns="columns1" :data="data1"></Table>
        </Panel>
        <Pagination></Pagination>
    </Col>
    <Col :span="5">
    <Panel :padding="10">
      <div slot="title" class="taglist-title">公告</div>
        <Alert show-icon>
          你可以点击刷新按钮,以获取最新的题目列表
        </Alert>
    </Panel>
    </Col>
  </Row>
</template>

<script>
  import Pagination from '@oj/components/Pagination'
  import CodeMirror from '@oj/components/CodeMirror.vue'
  
  export default {
    name: 'homeworkList',
    components: {
      Pagination
    },
    data () {
      return {
        columns1: [
          {
            title: '作业名称',
            key: 'name'
          },
          {
            title: '作业类型',
            key: 'age'
          },
          {
            title: '作业状态',
            key: 'address',
            width: 150,
            align: '',
            render: (h, params) => {
              let t = params.row.difficulty
              let color = 'blue'
              if (t === '完成') color = 'green'
              else if (t === '未完成') color = 'red'
              return h('Tag', {
                props: {
                  color: color
                }
              }, params.row.difficulty)
            }
          },
          {
            title: '截止日期',
            key: 'date'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: '',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$router.push({name: 'homeworkDetail', params: {homeworkID: params.row.id}})
                    }
                  }
                }, '查看')
              ])
            }
          }
        ],
        data1: [
          {
            id: '1',
            name: 'Python 数据爬虫-1',
            age: 'Python',
            address: '未完成',
            date: '2019-10-08',
            difficulty: '未完成'
          }
        ]
      }
    }
  }
</script>
